<template>
  <header class="wrapper-img-box">
    <div class="left-bg">
      <img
        v-show="isShowLeftArrow"
        class="left-arrow"
        @click="backToOverview"
        src="@/assets/icons/svg/base/header_top_back_arrow.svg"
        alt=""
      />
      <span>大连消防三维数字化预案</span>
      <div class="left-menu">
        <button :class="['menu-btn', isGisPage && 'active']" @click="onMenuClick(true)">
          GIS首页
        </button>
        <button :class="['menu-btn', isGisPage === false && 'active']" @click="onMenuClick(false)">
          数字预案
        </button>
      </div>
    </div>
    <div class="right-bg">
      <span class="sys-time">{{ currentTimeStr }} </span>
      <div class="right-menu">
        <img src="@/assets/icons/svg/base/top_header_computer.svg" alt="" />
        <span>管理台</span>
      </div>
      <div class="right-menu" @click="enterLogin">
        <img src="@/assets/icons/svg/base/top_header_person.svg" alt="" />
        <span>管理员</span>
      </div>
    </div>
  </header>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import moment from 'moment/dist/moment'
import 'moment/dist/locale/zh-cn'
import { computed } from 'vue'
import useUserStore from '@/stores/base'
import { removeToken } from '@/utils/auth'

const router = useRouter()
const userStore = useUserStore()
const currentTime = ref(new Date())
moment.locale('zh-cn')
const currentTimeStr = computed(() => {
  return moment(currentTime.value).format('YYYY/M/D dddd HH:mm:ss')
})

const isGisPage = computed(() => userStore.isGisPage)
const isShowLeftArrow = computed(() => userStore.showLeftViewStatus > 1)

const updateTime = () => {
  currentTime.value = new Date()
}
const { proxy } = getCurrentInstance()
onMounted(() => {
  setInterval(updateTime, 1000)
})

const onMenuClick = (isGis) => {
  userStore.changeHomePage(isGis)
}

const backToOverview = () => {
  userStore.changeOverView(1)
}

const enterLogin = () => {
  removeToken()
  router.push({ path: '/login', query: { user: 'john' } })
}
</script>
<style scoped lang='scss'>
.wrapper-img-box {
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
  width: 100%;
  height: 72px;
  background: linear-gradient(180deg, rgba(1, 5, 9, 0.85), rgba(1, 5, 9, 0) 80%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  z-index: 1009;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-image: url('@/assets/icons/svg/base/top_header_bg.svg');
  background-size: cover; /* 背景图片铺满整个元素 */
  // background: url("@/assets/images/new/base/top_header_bg.png") no-repeat center /
  // 			100%;

  .left-bg {
    display: flex;
    align-items: center;
    position: relative;
    pointer-events: all;

    .left-arrow {
      left: 18px;
      width: 97px;
      height: 40px;
      position: absolute;
      cursor: pointer;
    }

    span {
      white-space: nowrap;
      font-family: YouSheBiaoTiHei-2;
      font-weight: 400;
      font-size: 44px;
      line-height: 62px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      background-image: linear-gradient(90deg, #ffffff 0%, #ffffff 37%, #b4cff2 100%);
      -webkit-background-clip: text;
      color: transparent;
      margin-left: 171px;
      // color: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 37%, #B4CFF2 100%);
    }

    .left-menu {
      display: flex;
      align-items: center;
      margin-left: 203px;

      .menu-btn {
        width: 124px;
        height: 34px;

        font-family: Source Han Sans, Source Han Sans;
        font-weight: 500;
        font-size: 16px;
        color: #009bfd;
        line-height: 16px;
        font-style: normal;
        text-transform: none;
        opacity: 0.5;
      }
      button {
        pointer-events: all;
        user-select: none;
        cursor: pointer;
        background-color: transparent;
        background-image: url('@/assets/icons/svg/base/header_menu_select_off.svg');
        &:first-child {
          // margin-right: 10px;
        }
        &:hover {
          opacity: 1;
        }

        &.active {
          opacity: 1;
          background-image: url('@/assets/icons/svg/base/header_menu_select.svg');
          color: #ffffff;
        }
      }
    }
  }

  .right-bg {
    display: flex;
    align-items: center;
    margin-right: 14px;

    .sys-time {
      font-family: Source Han Sans, Source Han Sans;
      font-weight: 350;
      font-size: 18px;
      color: #90d5ff;
      line-height: 18px;
      text-align: left;
      font-style: normal;
      margin-right: 174px;
    }

    .right-menu {
      display: flex;
      align-items: center;
      cursor: pointer;
      pointer-events: all;

      img {
        width: 24px;
        height: 24px;
        margin-right: 4px;
      }

      span {
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 500;
        font-size: 14px;
        color: #2ec1ff;
        line-height: 14px;
        text-align: left;
        font-style: normal;
      }

      &:last-child {
        /* 添加样式 */
        margin-left: 10px;
      }
    }
  }
}
</style>